<template>
    <view class="container">
        <view style="position: sticky;z-index: 99;top: 0;background: #f1f1f1">
            <uni-search-bar placeholder="单位名称" radius="100" bgColor="#fff" @confirm="search" v-model="searchName"/>
        </view>
        <view>
            <view v-for="data in tableData" :key="data.id" class="card-item">
                <uni-card
                    :title="data.name"
                    :sub-title="data.address"
                    :extra="data.stateName"
                    :thumbnail="this.$baseUrl + data.photo"
                    @click="navigateToPage(data)"
                    class="card">
                    <text class="uni-body">{{data.explanation}}</text>
                </uni-card>
            </view>
        </view>
    </view>
</template>


<script>
    import AddButton from '@/common/component/AddButton.vue';
    import request from '@/util/request';
    export default {
        components: {
            AddButton
        },
        data() {
            return {
                searchName: '',
                tableData: [],
                pageNum: 1,
                pageSize: 10,
                total: 0,
            }
        },
        mounted() {
            this.load();
        },
		onPullDownRefresh() {
			this.pageNum=1;
			this.pageSize=10;
			this.load()
			uni.stopPullDownRefresh();
		},
		onReachBottom() { //触底事件
			if (this.pageNum * this.pageSize >= this.total) {
				uni.showToast({
					title: '没有更多数据了',
					icon: 'none',
					duration: 1000
				});
			} else {
				uni.showLoading({
					title: '加载中'
				});
				this.pageSize+=10
				this.load()
				setTimeout(() => {
					uni.hideLoading()
				}, 500)
			}
		},
        methods: {
            search(res) {
                this.load();
            },
            navigateToPage(data) {
                var objStr = JSON.stringify(data);
                uni.navigateTo({
                    url: '/pages/client/particular?client=' + objStr,
                });
            },
            load() {
                let level = this.$store.state.userInfo.level;
                let organizationId = this.$store.state.userInfo.organization;
                let isAllClient = this.$store.state.userInfo.isAllClient;
                let clientIds;
                if (isAllClient === "1") {
                    clientIds = this.$store.state.userInfo.clientIds;
                } else {
                    clientIds = [];
                }
                request.get("/client/listbyorgan?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize+"&level="+
                    level+"&organizationId="+organizationId+"&name="+this.searchName+"&isAllClient="+isAllClient+"&clientIds="+clientIds).then(res => {
                    this.tableData = res.data.record;
                    this.total = res.data.total;
                    for (let i = 0; i < this.tableData.length; i++) {
                        if (this.tableData[i].state === "0") {
                            this.tableData[i].stateName = "正常";
                        } else if (this.tableData[i].state === "1") {
                            this.tableData[i].stateName = "冻结";
                        } else if (this.tableData[i].state === "2") {
                            this.tableData[i].stateName = "暂停使用";
                        }
                    }
                })
            },
        },
    }
</script>

<style lang="scss" scoped>

.container {
    padding: 0 10px 10px 10px;
}

.card-item {
    margin-bottom: 20rpx;
}

.card {
    padding: 24rpx;
    border-radius: 16rpx;
    box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    cursor: pointer;
    background-color: #ffffff;

    &:hover {
        transform: scale(1.02);
        box-shadow: 0 8rpx 15rpx rgba(0, 0, 0, 0.1);
    }
}

.uni-body {
    font-size: 28rpx;
    color: #666666;
    line-height: 1.6;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16rpx;
}

.card-header .title {
    font-size: 30rpx;
    font-weight: 600;
    color: #333333;
}

.card-header .extra {
    font-size: 24rpx;
    font-weight: 500;
    padding: 4rpx 12rpx;
    border-radius: 12rpx;
    color: #fff;

    &.normal {
        background-color: #52c41a; /* 正常状态 */
    }

    &.frozen {
        background-color: #fa541c; /* 冻结状态 */
    }

    &.paused {
        background-color: #1890ff; /* 暂停状态 */
    }
}

.card-header .sub-title {
    font-size: 26rpx;
    color: #999999;
    margin-top: 6rpx;
}

.card-body {
    font-size: 28rpx;
    color: #3a3a3a;
    line-height: 1.6;
    margin-top: 12rpx;
}

.card-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 10rpx;
}

.card-footer .status {
    font-size: 24rpx;
    padding: 5rpx 10rpx;
    border-radius: 12rpx;
    color: #fff;

    &.normal {
        background-color: #52c41a;
    }

    &.frozen {
        background-color: #fa541c;
    }

    &.paused {
        background-color: #1890ff;
    }
}

</style>
